{% extends "base.html" %}


{% block body %}
      <script src="{{ url_for('static', filename='js/index.js') }}"></script>
    <body class="text-center">
    <h1 style="margin-bottom: 30px">音频脚本生成</h1>
    <!-- 配置表单 -->
    <form id="configForm">
        <fieldset class="  border " style="width: 80%; margin: 0 auto; padding: 10px;">
            <div class="mb-3">
                <label class="form-label">初始提示词</label>
                {{ form.init_prompt(class="form-control init_prompt_TextArea", rows="3",   style="width: 100%;") }}

            </div>
            <div class="row g-3">  <!-- 新增行容器，添加栅格间距 -->
                <div class="col-md-6">  <!-- 第一个区块 -->
                    <label class="form-label">生成个数 :</label>
                    <select class="form-control" id="quantitySelect" onchange="init_input_prompts()" style="text-align: center;">

                        {% for i in range(1, 101) %}
                            <option value="{{ i }}">{{ i }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6">  <!-- 第二个区块 -->
                    <label class="form-label">音色名</label>
                    <select class="form-control" id="VoiceInfoSelect" onchange="VoiceInfo()" style="text-align: left;">

                        {% for value, label in form.azure_voice_name.choices %}
                            <option value="{{ value }} ">{{ loop.index }}. {{ label+"          "+value }}    </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <br><br>
            <div class=" switch_prompt justify-content-md-end">

                  <div class="start_prompt ">
                      {{ form.start_prompt(class="form-control start_prompt  " ,id="start_prompt_input", rows="3"   ) }}
                </div>

                <!-- 替换为开关按钮组 -->
                <div class="form-check form-switch " style="width: auto;min-inline-size: 180px;">
                    <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
                    <label class="form-check-label" for="mySwitch" >阴历提示词</label>
                </div>

            </div>
            <br>
            <!-- 用于动态添加额外文本框的容器 -->
            <div id="textarea-container">

            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">

                <!-- 新增选择框 -->
                <input class="btn btn-primary me-md-2" id="create_button" onclick="createSceneScript()"  value="生成视频脚本">
                <input class="btn btn-success"  id="run_button" onclick="runProcess()"   value="生成视频配音">
                  <input class="btn btn-success"   onclick="getAudioList()"    value="历史">

            </div>
        </fieldset>
    </form>

    <!-- 模态框 -->
<div id="mListModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; overflow: auto; padding-top: 50px;">
    <div style="background-color: white; margin: auto; padding: 20px; border-radius: 5px; width: 80%; max-width: 600px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h3 class="m-0">音频文件列表</h3>
            <button id="closeMListModal" class="btn-close" aria-label="Close"></button>
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="selectAll">
                <label class="form-check-label" for="selectAll">全选</label>
            </div>
        </div>
        <div style="max-height: 300px; overflow-y: auto;">
            <ul id="mList" class="list-group"></ul>
        </div>
        <div class="d-flex justify-content-end mt-3">
            <button id="deleteFiles" class="btn btn-danger me-2">删除选择的文件</button>
            <button id="downloadFiles" class="btn btn-primary">下载选择的文件</button>
        </div>
    </div>
</div>
    </body>
{% endblock %}